<template>
  <div class="cateContainer">
    <VanSearch disabled placeholder="请输入搜索关键词" class="search" />
    <div class="cateBottom">
      <div class="cateBottomSlibar">
        <VanSidebar class="cateBottomSlibarLeft" v-model="active">
          <VanSidebarItem
            :title="item.name as string  "
            v-for="(item, index) in categoryL1List"
            :key="item.id as number"
            @click="onChange(index, item.id as number)"
          />
        </VanSidebar>
      </div>
      <div class="cateBottomSlibarRight">
        <img v-for="item in ImageList" :key="item.id" class="slibarRightImg" :src="item.picUrl" alt="" />
        <div class="bigBox" v-for="item in categoryGroupList" :key="item.id">
          <!-- <h2 class="bigH">{{ item.name }}</h2> -->
          <div @click="change" class="ImgText" v-for="attr1 in item.categoryList" :key="attr1.id as number">
            <img class="slibarRightImgBottom" :src="attr1.wapBannerUrl" alt="" @click="goPath(attr1.id)" />
            <span class="slibarRightText">{{ attr1.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- <div v-else>
    <div class="showList">
      <div class="showHeader">
        <VanIcon name="wap-home-o" class="showHome" @click="toIndex" />
        <h1 class="showH">网易严选</h1>
        <VanIcon name="search" class="showSearch" @click="toSearch" />
        <VanIcon name="shopping-cart-o" class="showCart" @click="toshopCart" />
      </div>
      <div class="showtext">
        <span class="showtextSpan">换季清仓</span>
      </div>
      <div class="showBox"></div>
      <div class="showCategory">
        <div class="showCategoryList" @click="toDetail">
          <div class="showCategoryImg">
            <img class="showCategoryImgTop" src="../../components/image/2.jpg" alt="" />
          </div>
          <div class="showCategoryText">
            <span>女士羊毛内里居家豆豆鞋</span>
          </div>
          <div class="showCategoryPrice">
            <span>￥229</span>
            <span class="showCategoryPriceBottom">￥329</span>
          </div>
          <div class="showCategorySpecial">
            <span>特价仅剩一天</span>
          </div>
        </div>
        <div class="showCategoryList">
          <div class="showCategoryImg">
            <img class="showCategoryImgTop" src="../../components/image/2.jpg" alt="" />
          </div>
          <div class="showCategoryText">
            <span>女士羊毛内里居家豆豆鞋</span>
          </div>
          <div class="showCategoryPrice">
            <span>￥229</span>
            <span class="showCategoryPriceBottom">￥329</span>
          </div>
          <div class="showCategorySpecial">
            <span>特价仅剩一天</span>
          </div>
        </div>
        <div class="showCategoryList">
          <div class="showCategoryImg">
            <img class="showCategoryImgTop" src="../../components/image/2.jpg" alt="" />
          </div>
          <div class="showCategoryText">
            <span>女士羊毛内里居家豆豆鞋</span>
          </div>
          <div class="showCategoryPrice">
            <span>￥229</span>
            <span class="showCategoryPriceBottom">￥329</span>
          </div>
          <div class="showCategorySpecial">
            <span>特价仅剩一天</span>
          </div>
        </div>
      </div>
    </div>
  </div> -->
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import router from '@/router'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'Category'
})
</script>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import { useCategoryStore } from '@/stores/modules/category'
import { storeToRefs } from 'pinia'
// import {useRouter} from 'vue-router'
const show_list = ref(true)
const detail = ref(false)
const active = ref(0)
const index1 = ref(0)
const lsitID = ref(11)
const onChange = (index: number, id: number) => {
  index1.value = index
  // console.log(id)
  lsitID.value = id
  useCategory.getPagingListdData(id)
}

const useCategory = useCategoryStore()

const { categoryL1List, ImageList, categoryGroupList, getItemList } = storeToRefs(useCategory)

onMounted(() => {
  // console.log(categoryL1List)
  // useCategory.getCategoryL1List()
  useCategory.getCategoryL1List()
  onChange(0, 11)
})
// 点击切换到列表页
const change = () => {
  show_list.value = false
}
// 点击到首页

const toIndex = () => {
  name: 'home'
  router.push('/home')
  path: '/home'
}
const toSearch = () => {
  name: 'search'
  router.push('/search')
  path: '/search'
}
const toshopCart = () => {
  name: 'shopCart'
  router.push('/shopCart')
  path: '/shopCart'
}
// const toDetail = () => {
//   // name: 'detail'
//   router.push('/detail')
//   // path: '/category/detail'
// }
const router = useRouter()
// 路由跳转
const goPath = (attr1: number) => {
  console.log(attr1, lsitID.value)
  router.push({
    path: '/goodslist',

    query: {
      attr1,
      lsitID: lsitID.value
    }
  })
}
// const toGoodslist=()=>{
// name:'Goodslist'
// router.push('/goodslist')
// path:'/shopCart'
// }
</script>

<style lang="less" scoped>
.cateContainer {
  width: 100%;
  height: 100%;
  .cateBottom {
    height: 81px;
    border-top: 1px solid black;
    display: flex;
    justify-content: space-between;
    .cateBottomSlibar {
      height: 600px;
      width: 81px;
      border-right: 1px solid black;
      .cateBottomSlibarLeft {
        .van-sidebar-item {
          // height: 16px;
          // width: 81px;
          border-width: 2px;
          padding: 20px 0;
          text-align: center;
          font-size: 14px;
          // color: #ab2b2b;
          background: var;
          &.active {
            background-color: red;
          }
        }
      }
    }
    .cateBottomSlibarRight {
      width: 265px;
      height: 96px;
      margin-right: 15px;
      margin-top: 15px;
      .bigBox {
        display: flex;
        flex-wrap: wrap;
        .bigH {
          font-size: 14px;
          margin-top: 10px;
          margin-bottom: 10px;
          flex-shrink: 0;
        }
        .ImgText {
          margin-top: 10px;
          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          .slibarRightImgBottom {
            margin-top: 10px;
            width: 72px;
            height: 72px;
          }
          .slibarRightText {
            font-size: 12px;
            margin-top: 10px;
            text-align: center;
          }
        }
      }

      .slibarRightImg {
        width: 265px;
        height: 96px;
      }
    }
  }
}
.showList {
  height: 100%;
  width: 100%;

  .showHeader {
    width: 375px;
    height: 44px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    // padding-left: 12px;
    // padding-right: 8px;
    border: 1px solid black;
    box-sizing: border-box;
    text-align: center;
    margin-left: 12px;
    .showHome {
      width: 24px;
      height: 22px;
    }
    // .showSearch {
    //   // margin-right: 20px;
    // }
    .showH {
      flex: 1;
      text-align: center;
    }
  }
  .showtext {
    width: 375px;
    text-align: center;

    .showtextSpan {
      font-size: 14px;
    }
  }
  .showBox {
    width: 375.33px;
    height: 55px;
  }
  .showCategory {
    height: calc(100vh-129px);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .showCategoryList {
      margin-left: 10px;
      width: 172.5px;

      .showCategoryImg {
        width: 172px;
        height: 172px;
        .showCategoryImgTop {
          width: 172px;
          height: 172px;
        }
      }
      .showCategoryText {
        font-size: 14px;
      }
      .showCategoryPrice {
        font-size: 20px;
        color: red;

        .showCategoryPriceBottom {
          color: #999999;
          font-size: 12px;
          text-decoration: line-through;
        }
      }
      .showCategorySpecial {
        font-size: 14px;
        font-weight: 700;
        color: red;
      }
    }
  }
}
</style>
